<template>
  <div class="pagenation">
    <div class="page">
      <select name id v-model="pageSize" @change="changePageSize">
        
        <option :value=9>9</option>
        <option :value=11>11</option>
        <option :value=13>13</option>
        <option :value=15>15</option>
      </select>
    </div>
    <div>
      <span>＜</span>
    </div>
    <div v-for="(item,index) in pageNo" :key="index" @click="choosePageNo(index)">
      <button :class="{currentPageNo:currentIndex===index}" @click="changePageNo(index)">{{item}}</button>
    </div>
    <div>
      <span>></span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["pageno", "allContent"],
  data() {
    return {
      pageNo: [],
      currentIndex: 0,
      pageSize: 11,
      newContent:[]
      // index:1,
    };
  },
  mounted() {},
  watch: {
    allContent(val, oldval) {
      console.log(val);
      this.newContent=val
      this.computPageNo(val.length, [1], 1);
    },
    pageSize(val,oldval){
      console.log(this.newContent.length);
      
      this.computPageNo(this.newContent.length,[1],1)
    },
    immediate: true, //关键
    deep: true,
  },
  methods: {
    //获取当前页数
    computPageNo(CL, pageNo, index) {
      if (CL - this.pageSize > 0) {
        CL = CL - this.pageSize;
        index = index + 1;
        pageNo.push(index);
        this.computPageNo(CL, pageNo, index);
      } else {
        this.pageNo = pageNo;
      }
    },
    choosePageNo(index) {
      this.currentIndex = index;
    },
    changePageNo(index) {
      this.$emit("changePageNo", index);
    },
    changePageSize() {
      console.log(typeof this.pageSize);
      this.currentIndex=0
      this.$emit("changePageSize", this.pageSize);
    },
  },
};
</script>

<style lang="less" scoped>
.pagenation {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  div {
    margin: 15px 5px;
    select {
      font-weight: 600;
      width: 65px;
      height: 25px;
      border: 2px solid black;
      padding: 0px 15px 0 10px;
      transition: all 0.5s;
      outline: none;
      //cursor: url("../assets/img/cur/mais.png"), default;
      option {
        border: 2px solid black;
        color: red;
      }
    }
    span {
      &:active {
        color: #fff;
      }
    }
    button {
      width: 45px;
      height: 25px;
      border: 2px solid black;
      outline: none;
      border-radius: 20px;
      background-color: transparent;
      font-weight: 600;
      //cursor: url("../assets/img/cur/mais.png"), default;
      &:hover {
        background-color: #fff;
        color: red;
      }
    }
  }
}
.currentPageNo {
  background-color: black !important;
  color: #fff;
}
@media screen and (max-width: 765px) {
  .pagenation {
    div {
      button {
        background-color: #fff;
        transition: all 0.3s;
        &:active {
          background-color: black;
          color: #fff;
        }
      }
    }
  }
}
</style>